<template>
  <div class="shopCartList bodycontent">
    <table>
      <thead class="cartListTitle">
        <tr>
          <th class="cartFirstTh"><input type="checkbox">爱果果水果店</th>
          <th>规格</th>
          <th>单价</th>
          <th>数量</th>
          <th>金额</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="cartFirstTd"><input type="checkbox"><img src="../assets/img/banner-13.png" alt=""><span>云南蒙自石榴8个装</span></td>
          <td>8个装</td>
          <td ref="unPrice">￥569</td>
          <td><NumCount /></td>
          <td ref="allPrice">￥569</td>
          <td><span class="deleteCart" @click="deleteCart">删除</span></td>
        </tr>
        <tr>
          <td class="cartFirstTd"><input type="checkbox"><img src="../assets/img/banner-13.png" alt=""><span>云南蒙自石榴8个装</span></td>
          <td>8个装</td>
          <td ref="unPrice">￥569</td>
          <td><NumCount /></td>
          <td ref="allPrice">￥569</td>
          <td><span class="deleteCart" @click="deleteCart">删除</span></td>
        </tr>
      </tbody>
    </table>
    <div class="cartAllMoney clear">
      <em>￥569</em><span>商品金额</span>
    </div>
  </div>
</template>
<script>
import NumCount from"@/components/NumCount.vue"
export default {
  components:{
    NumCount,
  },
  methods:{
    deleteCart(){

    }
  }
}
</script>
<style>
  .shopCartList{
    box-sizing: border-box;
    border: 1px solid #e9e9e9;
  }
  .shopCartList table{
    width: 100%;
    box-sizing: border-box;
  }
  .cartListTitle{
    background-color: #f2f2f2;
    height: 47px;
    line-height: 47px;
  }
  .cartListTitle th{
    font-weight: 500;
  }
  .cartFirstTh,.cartFirstTd{
    box-sizing: border-box;
    padding-left: 21px;
    text-align: left;
  }
  .cartFirstTh input,.cartFirstTd input{
    margin-right: 20px;
  }
  .cartFirstTd{
    padding-top:20px; 
    padding-bottom:20px; 
  }
  .cartFirstTd img{
    width: 78px;
    height: 78px;
    vertical-align: middle;
    border: 1px solid #dedede;
    margin-right: 15px;
  }
  .shopCartList tbody tr{
    font-size: 14px;
    color: #666;
    border-bottom: 1px solid #e9e9e9;
    text-align: center;
  }
  .deleteCart{
    color: #498e3d;
    text-decoration: underline;
    cursor: pointer;
  }
  .cartAllMoney{
    height: 80px;
    line-height: 80px;
  }
  .cartAllMoney span{
    float: right;
    font-size: 18px;
    margin-right: 23px;
    color: #666;
  }
  .cartAllMoney em{
    float: right;
    width: 120px;
    color: #ff5757;
  }
</style>